import React, { Component } from 'react'
import { Select, Form, Card, Button, Row, Col, Table, Divider, Tag, Input, DatePicker, Pagination, message, Icon } from 'antd';
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
import moment from 'moment';
import { connect } from 'dva';
import style from './index.css';


import ModificationButton from './ModificationButton'
import AddButton from './AddButton'
import BaseComponent from '@/components/BaseComponent';
import PermissionsWidget from '@/components/PermissionsWidget';


@connect(({ user }) => ({
  // data: risk.riskData,
  currentUser: user.currentUser,
}))
export default class index extends BaseComponent {

  constructor(props) {
    super(props)
    this.state = {
      expand: false,
      data: [],
      total: 0,
      current: 0,
      form: {},
      provinceIdData: [],
      cityIdData: [],
      districtIdData: [],
      countyIdData: [],
      villageIdData: [],

    }
  }
  componentDidMount() {
    this.getDataByPage({})
    this.getCity({ level: 1, parentCode: '1' })
  }

  //分页
  getDataByPage = (param) => {
    this.execHttp('plannedFollowUp/selList', { user: this.props.currentUser.id, currentPage: 1, pageSize: 10, ...param }).then((resp) => {
      if (resp.success) {
        this.setState({
          data: resp.data.list,
          total: resp.data.pagination.total,
          current: resp.data.pagination.current
        })
      }
    });
  }
  //分页切换
  onChangePagination = (page, pageSize) => {
    this.getDataByPage({
      user: this.props.currentUser.id,
      currentPage: page,
      pageSize: pageSize,
      ...this.state.form,
    });
  };
  onShowSizeChange = (current, pageSize) => {
    if (current === 0) {
      current = 1
    }
    this.getDataByPage({
      user: this.props.currentUser.id,
      currentPage: current,
      pageSize: pageSize,
      ...this.state.form,
    });
  }


  //分页删除
  del = (id) => {
    this.execHttp('plannedFollowUp/del', { id: id }).then((resp) => {
      if (resp.success) {
        message.success(resp.message);
        this.getDataByPage({})
      }
    });
  }
  //查询省
  getCity = (param) => {
    this.execHttp('plannedFollowUp/getCity', { ...param }).then(resp => {
      if (resp) {
        if (param.level == 1) {
          this.setState({
            provinceIdData: resp.data,
          })
        } else if (param.level == 2) {
          this.setState({
            cityIdData: resp.data,
          })
        } else if (param.level == 3) {
          this.setState({
            districtIdData: resp.data,
          })
        } else if (param.level == 4) {
          this.setState({
            countyIdData: resp.data,
          })
        } else if (param.level == 5) {
          this.setState({
            villageIdData: resp.data,
          })
        }
      }
    });
  };

  provinceIdChange = (value) => {
    const str = value ? this.state.provinceIdData.find(item => item.code == value) : '';
    const name = str.name
    this.setState((params) => ({
      form: {
        ...params.form,
        provinceId: value,
      }
    }), () => {
      this.getCity({ level: 2, parentCode: value })
    });


  }
  cityIdChange = (value) => {
    const str = value ? this.state.cityIdData.find(item => item.code == value) : '';
    const name = str.name
    this.setState((params) => ({
      form: {
        ...params.form,
        cityId: value,
      }
    }), () => {
      this.getCity({ level: 3, parentCode: value })
    }
    );
  }

  districtIdChange = (value) => {
    const str = value ? this.state.districtIdData.find(item => item.code == value) : '';
    const name = str.name
    this.setState((params) => ({
      form: {
        ...params.form,
        districtId: value,
      }
    }), () => {
      this.getCity({ level: 4, parentCode: value })
    });
  }
  countyIdChange = (value) => {
    const str = value ? this.state.countyIdData.find(item => item.code == value) : '';
    const name = str.name
    this.setState((params) => ({
      form: {
        ...params.form,
        countyId: value,
      }
    }), () => {
      this.getCity({ level: 5, parentCode: value })
    });
  }

  villageIdChange = (value) => {
    const str = value ? this.state.villageIdData.find(item => item.code == value) : '';
    const name = str.name
    this.setState((params) => ({
      form: {
        ...params.form,
        villageId: value,
      }
    }));
  }

  //查询
  searchClick = () => {
    this.getDataByPage(this.state.form)
  }

  //重置
  resetClick = () => {
    this.setState(() => ({
      form: {
      }
    }), () => {
      this.getDataByPage(this.state.form)
    })
  }
  //展开与否状态切换
  handleToggle = () => {
    const { expand } = this.state;
    this.setState({ expand: !expand });
  };

  render() {
    const columns = [
      // {
      //   title: 'ID',
      //   dataIndex: 'id',
      //   key: 'id',
      // },
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
        width: 100,
        fixed: 'left'
      },
      {
        title: '身份证',
        dataIndex: 'sfz',
        key: 'sfz',
        width: 200,
        fixed: 'left'
      },
      {
        title: '手机号',
        dataIndex: 'phone',
        key: 'phone',
      },
      {
        title: '计划时间',
        dataIndex: 'plan_time',
        key: 'plan_time',
        render: (text, record, index) => {
          const { plan_time } = record;
          const str = moment(plan_time).format('YYYY-MM-DD');
          return str;
        },
      },
      {
        title: '省份名称',
        dataIndex: 'province_name',
        key: 'province_name',
      },
      {
        title: '市级名称',
        dataIndex: 'city_name',
        key: 'city_name',
      },
      {
        title: '区县名称',
        dataIndex: 'district_name',
        key: 'district_name',
      },
      {
        title: '乡镇名',
        dataIndex: 'township_name',
        key: 'township_name',
      },
      {
        title: '村名',
        dataIndex: 'village_name',
        key: 'village_name',
      },
      {
        title: '详细地址',
        dataIndex: 'address',
        key: 'address',

      },
      {
        title: '随访状态',
        dataIndex: 'status',
        key: 'status',
        render: (text, record, index) => {
          const { status } = record;
          const data = [{ id: '1', name: '未随访' }, { id: '2', name: '已随访' }]
          const str = status ? data.find(item => item.id == status) : '';
          return str.name;
        },

      },

      {
        title: '操作',
        key: 'action',
        fixed: 'right',
        render: (text, record) => (
          <div className={style.actionstyle} >

            <ModificationButton record={record} getDataByPage={this.getDataByPage}></ModificationButton>

            <PermissionsWidget tag={'plannedFollowUp:planFollow-delete'}>
              <Button type="danger" style={{ marginLeft: "10px" }} onClick={() => { this.del(record.id) }} >删除</Button>
            </PermissionsWidget>

          </div>
        ),
      },
    ];


    const { data, total, current } = this.state;
    return (
      <div>
        <Card size="small" style={{ width: "100%" }} bordered={true} title={'计划随访'}>
          <Form layout="horizontal">
            <Row gutter={16}>
              <Col span={6}>
                <Form.Item >
                  <Select allowClear value={this.state.form.provinceId} onChange={this.provinceIdChange} placeholder="请选择所属省份">
                    {this.state.provinceIdData.map(item => (
                      <Select.Option key={item.code}>{item.name}</Select.Option>
                    ))}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item >
                  <Select allowClear value={this.state.form.cityId} onChange={this.cityIdChange} placeholder="请选择所属城市">
                    {this.state.cityIdData.map(item => (
                      <Select.Option key={item.code}>{item.name}</Select.Option>
                    ))}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item>
                  <Select allowClear value={this.state.form.districtId} onChange={this.districtIdChange} placeholder="请选择所属区/县">
                    {this.state.districtIdData.map(item => (
                      <Select.Option key={item.code}>{item.name}</Select.Option>
                    ))}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={6} style={{ textAlign: 'center' }}>
                <Button type="primary" onClick={this.searchClick} >
                  查询
                </Button>
                {/* <Button type="primary" style={{ marginLeft: "10px" }} onClick={this.exportData} >
                  导出
                </Button> */}
                <Button onClick={this.resetClick} style={{ marginLeft: "10px" }} >
                  重置
                </Button>
                <a style={{ marginLeft: 8, fontSize: 12 }} onClick={this.handleToggle}>
                  {this.state.expand ? '折叠' : '展开'}
                  <Icon type={this.state.expand ? 'up' : 'down'} />
                </a>
              </Col>
            </Row>

            <Row gutter={16} style={{ display: this.state.expand ? 'block' : 'none' }} >
              <Col span={6}>
                <Form.Item>
                  <Select allowClear value={this.state.form.countyId} onChange={this.countyIdChange} placeholder="请选择所属乡镇">
                    {this.state.countyIdData.map(item => (
                      <Select.Option key={item.code}>{item.name
                      }</Select.Option>
                    ))}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item>
                  <Select allowClear value={this.state.form.villageId} onChange={this.villageIdChange} placeholder="请选择所属村">
                    {this.state.villageIdData.map(item => (
                      <Select.Option key={item.code}>{item.name
                      }</Select.Option>
                    ))}
                  </Select>
                </Form.Item>
              </Col>
            </Row>
          </Form>
          <PermissionsWidget tag={'plannedFollowUp:planFollow-add'}>
            <AddButton getDataByPage={this.getDataByPage}></AddButton>
          </PermissionsWidget>
          <Table columns={columns} dataSource={data} rowKey='id' pagination={false} scroll={{x: 2000}}  
            size="small"
            style={{marginTop:'20px'}}/>
          <div style={{
            marginTop: "20px", display: "flex",
            flexDirection: "row-reverse",
          }}><Pagination
              showSizeChanger={true}
              showQuickJumper
              onChange={this.onChangePagination}
              onShowSizeChange={this.onShowSizeChange}
              defaultCurrent={1}
              total={total}
              current={current}
              showTotal={total => `总共 ${total} 条`}
            /></div>
        </Card>
      </div>
    )
  }
}
